<template>
  <div class="flex-box">
    <div class="header">
      <div class="tabs">
        <div
          :class="{ is__current: currentIndex === t.v }"
          v-for="t in tabList"
          :key="t.v"
          @click="currentIndex = t.v"
        >
          {{ t.t }}
        </div>
      </div>
    </div>
    <component
      :is="currentIndex ? 'testpaper' : 'database'"
      :subject-code="subjectCode"
      :add-data="addData"
    />
  </div>
</template>

<script lang="ts">
import { PropType, ref } from "vue";
import DatabaseComponent from "./database.vue";
import TestpaperComponent from "./testpaper.vue";

export default {
  props: {
    subjectCode: String,
    addData: Function as PropType<(id) => void>,
  },
  components: { database: DatabaseComponent, testpaper: TestpaperComponent },
  setup() {
    let tabList = [ { t: '章节资料', v: 0 }, { t: '试卷', v: 1 } ];
    // let tabList = [{ t: "章节资料", v: 0 }];

    let currentIndex = ref(0);

    return { tabList, currentIndex };
  },
};
</script>

<style lang="scss" scoped>
.flex-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 -20px;
}
.header {
  padding: 10px 0;
  border-bottom: solid 1px #dcdee3;
  text-align: center;
  .tabs {
    display: inline-flex;
    padding: 4px 8px;
    background: #f5f7fa;
    border-radius: 8px;
    & > div {
      padding: 0 12px;
      height: 36px;
      line-height: 36px;
      border-radius: 8px;
      transition: all 0.25s;
      cursor: pointer;
      &.is__current {
        color: #fff;
        background: #72b22a;
      }
    }
  }
}
</style>